import React, { Component } from 'react';
import { Relax } from 'plume2';
import ares from 'ares-mobile';
import { hashHistory } from 'react-router';
import Slider from 'react-slick';
import {
  List,
  WhiteSpace,
  Button,
  AppIcon,
  WingBlank,
  Toast,
  Radio,
  Flex,
  Modal,
} from 'ares-uikit';
@Relax
export default class Template extends Component<any, any> {
  static relaxProps = {
    list: 'list',
    editor: 'editor',
    getUrl: 'getUrl',
    release: 'release',
    clickTplImage: () => {},
    clickRelease: () => {},
    emptyData: () => {},
  };

  constructor(props) {
    super(props);
    this.state = {
      _index: -1,
      release: this.props.relaxProps.release.release,
    };
    ares.extra.add('logout');
    ares.extra.add('close');
    ares.extra.add('scroll');
    ares.config({
      jsApiList: [
        'biz.navigation.setTitle',
        'extra.logout',
        'extra.close',
        'biz.navigation.onBack',
        'device.notification.confirm',
        'device.notification.alert',
        'biz.navigation.setMenu',
        'biz.history.onBack',
        'extra.scroll',
      ],
    });
    ares.ready(() => {
      this.setTitle();
      this.setPreview(this.state._index);
    });
  }

  setTitle() {
    ares.biz.navigation.setTitle({
      title: '模板选择',
    });
  }

  setPreview(index) {
    // let index=this.state._index;
    if (index === -1) {
      index = 0;
    }
    let id = this.props.relaxProps.list[index].id;
    let url = this.props.relaxProps.list[index].image;
    let boolean = this.props.relaxProps.list[index].activated;
    let _height = this.props.relaxProps.list[index].height;
    this.props.relaxProps.clickTplImage(url, id, boolean, _height);
    ares.biz.navigation.setMenu({
      items: [
        {
          id: '1', //字符串
          iconId: '', //字符串，图标命 名
          text: '预览',
          color: '#000000',
          size: '20',
        },
      ],
      onSuccess: result => {
        switch (result.id) {
          case '1':
            location.href = this.props.relaxProps.getUrl;
            break;
        }
      },
    });
  }

  /**
   * 拦截返回键
   */
  setBack = () => {
    ares.biz.navigation.onBack({
      onSuccess: function(data) {
        ares.extra.close();
      },
    });
  };
  //禁掉上下滑动手势
  setScoll = () => {
    ares.extra.scroll({
      enable: false,
      onSuccess: function(result) {
        console.log(result);
      },
    });
  };

  componentDidMount() {
    //页面初始化销毁历史数据
    this.props.relaxProps.emptyData('');
    this.setBack();
    this.setScoll();
  }
  componentWillReceiveProps() {}
  //销毁预览按钮
  componentWillUnmount() {
    ares.biz.navigation.setMenu({
      items: [],
    });
  }

  //提示信息
  // logout = () => {
  //     ares.device.notification.alert({
  //         message: "您当前使用的为在电脑上进行装修的店铺模版，1000.com",
  //         title: "提示",//可传空
  //         buttonName: "确认",
  //         onSuccess: function (result) {
  //             //onSuccess将在点击button之后回调
  //             /*回调*/
  //             if (result.buttonIndex == 1) {
  //                 ares.extra.logout({})
  //             }
  //         },
  //         onFail: function (err) {
  //         }
  //     });
  // }

  render() {
    let { list } = this.props.relaxProps;
    if (list.length === 0 || list.size === 0) {
      return <div />;
    }
    const index = list.findIndex(item => item.activated);
    let settings = {
      autoplay: false,
      arrows: false,
      centerMode: true,
      className: 'center',
      centerPadding: '60px',
      infinite: true,
      slidesToShow: 1,
      speed: 500,
      initialSlide: index,
    };
    let _li = list.map((item, index) => {
      return (
        <div key={index} className="templateImg">
          <div className="templateImgBox">
            <img
              src={item.image}
              onClick={e =>
                this.headerClick(
                  item.image,
                  item.id,
                  item.activated,
                  item.height,
                  item.content,
                  index
                )
              }
              alt=""
            />
            {item.activated ? (
              <p
                className="templateName"
                style={{ background: '#ccc' }}
                onClick={e =>
                  this.headerClick(
                    item.image,
                    item.id,
                    item.activated,
                    item.height,
                    item.content,
                    index
                  )
                }
              >
                已使用
              </p>
            ) : (
              <p
                className="templateName"
                onClick={e =>
                  this.headerClick(
                    item.image,
                    item.id,
                    item.activated,
                    item.height,
                    item.content,
                    index
                  )
                }
              >
                确认使用
              </p>
            )}
          </div>
        </div>
      );
    });
    return this.state.release ? (
      <div className="editorTemplate" onClick={this.releaseClick}>
        您当前使用的为在电脑上进行装修的店铺模板，如需修改请登录“1000.com”。
        <img
          src="//qianmi-web.oss-cn-hangzhou.aliyuncs.com/x-site/public/x-site-ui-wechat/statics/app-xsite/template-background.png"
          alt=""
        />
      </div>
    ) : (
      <div className="template">
        <Slider
          {...settings}
          afterChange={index => {
            this.setPreview(index);
            this.setState({ _index: index });
          }}
        >
          {_li}
        </Slider>
        <p className="templateButtomTitle">更多设置请登录电脑后台1000.com</p>
      </div>
    );
  }

  headerClick = (url, id, boolean, _height, content, index) => {
    console.log(id);
    console.log(boolean);
    this.props.router.push(`/qm-app-xsite/compile/${id}`);
    if (id !== this.props.relaxProps.editor.get('SelectId')) {
      content = '';
    }
    this.props.relaxProps.clickTplImage(
      url,
      id,
      boolean,
      _height,
      content,
      index
    );
  };
  releaseClick = () => {
    this.setState({ release: false });
    this.props.relaxProps.clickRelease(false);
  };
}
